<template>
  <div>
    <!-- 头部 -->
    <nav-header></nav-header>

    <!-- 面包屑 -->
    <nav-bread>
      <span slot="bread">商品列表</span>
    </nav-bread>

    <!-- 内容 -->
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a @click="sortGoods" href="javascript:void(0)" class="price">
            Price

            <!--<svg class="icon-arrow-short" v-bind:class="{'sort-up' : !sortFlag}">-->
              <!--<use xmlns:xlink="http://www.x3.org/1993/xlink" xlink:href="#icon-arrow-short"></use>-->
            <!--</svg>-->

            <!-- 排序箭头 -->
            <span v-show="sortFlag">↓</span>
            <span v-show="!sortFlag" >↑</span>
          </a>
          <!-- 价格 -->
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- 价格过滤（当屏幕比较小时，会被隐藏） -->
          <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <!-- 所有价格区间 -->
              <dd><a href="javascript:void(0)" v-bind:class="{'cur': priceChecked == 'all'}" @click="setPriceFilter('all')">All</a></dd>
              <!-- 价格区间 -->
              <dd v-for="(price, index) in priceFilter">
                <a href="javascript:void(0)" @click="setPriceFilter(index)" v-bind:class="{'cur': priceChecked == index}">{{price.startPrice}} - {{price.endPrice}}</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="(item, index) in goodsList">
                  <div class="pic">
                    <!--<a href="#"><img :src="'/static/'+ item.productImg " alt=""></a>-->
                    <a href="#"><img v-lazy="'/static/'+ item.productImage " alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{ item.productName }}</div>
                    <div class="price">{{ item.salePrice }}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <!-- 分页加载 -->
              <div class="view-more-normal"
                   v-infinite-scroll="loadMore"
                   infinite-scroll-disabled="busy"
                   infinite-scroll-distance="20">
                <!--加载中...-->
                <img v-show="loading" src="../assets/loading-spinning-bubbles.svg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 遮罩 -->
    <div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>

    <!-- 模态框：未登录 -->
    <modal v-bind:mdShow="mdShow" v-on:close="closeModal">
      <p slot="message">
        请先登录，否则无法加入到购物车中~
      </p>
      <div slot="btnGroup">
        <a @click="mdShow = false" class="btn btn--m" href="javascript:;">关闭</a>
      </div>
    </modal>

    <!-- 模态框：成功加入购物车 -->
    <modal v-bind:mdShow="mdShowCart" v-on:close="closeModal">
      <p slot="message">
        <svg class="icon-status-ok">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
        </svg>
        <span>成功加入购物车</span>
      </p>
      <div slot="btnGroup">
        <a @click="mdShowCart = false" class="btn btn--m" href="javascript:;">继续购物</a>
        <router-link to="/cart" class="btn btn--m" href="javascript:;">查看购物车</router-link>
      </div>
    </modal>

    <!-- footer -->
    <nav-footer></nav-footer>
  </div>
</template>
<script>
import '../assets/css/base.css'
import '../assets/css/product.css'
// 头部
import NavHeader from '@/components/NavHeader.vue'
// footer
import NavFooter from '@/components/NavFooter.vue'
// 面包屑
import NavBread from '@/components/NavBread.vue'
// 模态框
import Modal from '@/components/Modal.vue'
// axios
import axios from 'axios'
export default{
  data () {
    return {
      goodsList: [],
      // 价格区间
      priceFilter: [
        {
          startPrice: '0.00',
          endPrice: '500.00'
        },
        {
          startPrice: '500.00',
          endPrice: '1000.00'
        },
        {
          startPrice: '1000.00',
          endPrice: '2000.00'
        },
        {
          startPrice: '2000.00',
          endPrice: '5000.00'
        }
      ],
      // 赛选价格区间：默认选中全部
      priceChecked: 'all',
      // 价格过滤（当屏幕比较小时，会被隐藏）
      filterBy: false,
      // 控制遮罩
      overLayFlag: false,
      // 排序 true升序
      sortFlag: true,
      // 当前第一页
      page: 1,
      // 每页8调数据
      pageSize: 8,
      // 默认禁用滚动
      busy: true,
      // 加载中 默认不显示，接口请求完再显示
      loading: false,
      // 模态框：未登录 显示或隐藏
      mdShow: false,
      // 模态框：成功加入购物车 显示或隐藏
      mdShowCart: false
    }
  },
  components: {
    NavHeader,
    NavFooter,
    NavBread,
    Modal
  },
  mounted: function () {
    this.getGoodsList();
  },
  methods: {
    /**
     * 获取商品列表
     * flag：判断是否可以进行累加
     */
    getGoodsList(flag) {
      // 该处读取的是build/dev-server.js里配置的json文件
      // axios.get('/goods').then((result) => {
      //  var res = result.data.result;
      //  this.goodsList = res;
      //})

      // 这里调用的是node的接口
      var param = {
        page: this.page,
        pageSize: this.pageSize,
        sort: this.sortFlag ? 1 : -1,
        // 赛选价格区间
        priceLevel: this.priceChecked
      };
      this.loading = true;
      axios.get('/goods/list', {
        params: param
      }).then((response) => {
        let res = response.data;
        this.loading = false;
        if (res.status == '0') {
          // 分页，进行数据拼接
          if (flag) {
            this.goodsList = this.goodsList.concat(res.result.list);

            // 判断总条数
            if (res.result.count == 0) {
              this.busy = true;
            } else {
              this.busy = false;
            }
          } else{
            // 不需要数据拼接，第一次进入
            this.goodsList = res.result.list;
            this.busy = false;
          }
        } else {
          this.goodsList = [];
        }
      })
    },
    /**
     * 排序
     */
    sortGoods() {
      this.sortFlag = !this.sortFlag;
      this.page = 1;
      this.getGoodsList();
    },
    /**
     * 当鼠标滚动的时候调用
     */
    loadMore() {
      // 禁止再去滚动加载
      this.busy = true;
      setTimeout(() => {
        this.page++;
        this.getGoodsList(true)
      },500)
    },
    /**
     * 点击的时候出现价格
     */
    showFilterPop() {
      this.filterBy = true;
      this.overLayFlag = true;
    },
    /**
     * 设置价格过滤
     */
    setPriceFilter(index) {
      this.priceChecked = index;
      this.page = 1;
      this.getGoodsList();

      this.closePop();
    },
    /**
     * 点击遮罩关闭价格弹窗
     */
    closePop() {
      this.filterBy = false;
      this.overLayFlag = false;
    },
    /**
     * 加入购物车
     */
    addCart(productId) {
      axios.post('/goods/addCart', {
        productId: productId
      }).then((res) => {
        if (res.data.status == 0) {
          this.$store.commit('updateCartCount', 1);
          // alert('加入成功');
          this.mdShowCart = true;
        } else {
          // alert('加入失败');
          this.mdShow = true;
        }
      })
    },
    /**
     * 关闭模态框
     */
    closeModal() {
      this.mdShow = false;
    }
  }
}
</script>
